<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-resource-1.3.4.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
  <div id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加品牌</h3>
      </div>
      <div class="panel-body form-inline">
        <label>
          Name:
          <input @keyup.enter="add" type="text" v-model="name" class="form-control">
        </label>
        <input @click="add" type="button" value="添加" class="btn btn-primary">
      </div>
    </div>
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in products" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.ctime }}</td>
          <td>
            <a @click.prevent="del(item.id)" href="">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<script>
  // 设置vue-resource的请求根域名
  // 如果设置了root选项, 必须要在请求时以相对路径开头 不能加 / 
  Vue.http.options.root = 'http://www.lovegf.cn:8899/api'
  // 全局启动emulateJSON配置  以后发送post请求都不需要设置这个选项了!
  Vue.http.options.emulateJSON = true

  // 创建Vue实例
  let vm = new Vue({
    el: '#app',
    data: {
      name: '',
      products: [
      ]
    },
    methods: {
      getProducts() {
        // Code Review
        // get请求 http://www.lovegf.cn:8899/api/getprodlist
        // ES3年代 代码结尾记得加分号哦!
        // ES6 官方不建议大家加分号
        this.$http.get('getprodlist')
          .then(result => {
            // console.log(result)
            let productsResult = result.body.message
            // 1000 / 100  10
            this.products = productsResult.slice(productsResult.length - 50, productsResult.length)
          })
      },
      add() {
        if (!this.name.trim()) return alert('请输入品牌名称!')

        // post请求 http://www.lovegf.cn:8899/api/addproduct
        // 参数: name 品牌名称
        // Content-Type: application/json 这种Content-Type很多服务器不支持
        // 所以需要在前端将Content-Type修改为 application/x-www-form-urlencoded
        // jQuery为了兼容性, 所有post请求, 默认采用的就是 application/x-www-form-urlencoded
        // 所以在以前使用jQuery的ajax时不需要手动设置Content-Type
        this.$http.post('addproduct', { name: this.name })
          .then(result => {
            // 添加成功了!
            // 添加成功重新获取数据 自动刷新页面
            this.getProducts()
          })
      },
      del(id) {
        // get请求 http://www.lovegf.cn:8899/api/delproduct/:id
        this.$http.get('delproduct/' + id)
          .then(result => {
            this.getProducts()
          })
      }
    },
    created() {
      // 发送AJAX请求 获取数据
      this.getProducts()
    }
  })
</script>

</html>